<template>
  <div>
    <div class="w1">
      <el-image :src="wxLogo" class="image" width="100%" height="100%"></el-image>
    </div>
    <div class="w2">
      <h1>请使用微信登录</h1>
    </div>
    <el-image :src="pic" id="qrCodeImgId" class="w3" />
    <el-dialog title="新用户信息完善" v-model="filled" width="40%" :before-close="handleClose">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item
          label="姓名"
          class="w4"
          prop="username"
        >
          <el-input
            v-model="form.username"
            type="text"
            class="w5"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" class="w6" prop="gender">
          <el-radio-group v-model="form.gender" class="w7">
            <el-radio label="男" value="男" class="w8">男</el-radio>
            <el-radio label="女" value="女" class="w8">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="密码"
          class="w9"
          prop="password"
        >
          <el-input
            v-model="form.password"
            type="password"
            class="w10"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          class="w9"
          prop="phone"
        >
          <el-input
            v-model="form.phone"
            type="text"
            class="w10"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          class="w9"
          prop="email"
        >
          <el-input
            v-model="form.email"
            type="text"
            class="w10"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w11" @click="submitEvent"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios'
import { SM3 } from '@/utils/sm3.js'
import { ElMessage } from 'element-plus'
import router from '@/router'
import '@/assets/scss/userCom/Phone/wx2.scss'
const formRef = ref(null)
const filled = ref(false)
const pic = ref(null)
const sceneStr = ref(null)
const t = ref(null)
const openId = ref(null)
const wxLogo = require('@/assets/wx.jpg')
const form = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  phone: '',
  email: ''
})
const validatePass3 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不可为空'))
  } else {
    if (value !== '') {
      const reg = /^1[3456789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的手机号码'))
      }
    }
    callback()
  }
}
const validatePass4 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请正确填写邮箱'))
  } else {
    if (value !== '') {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!reg.test(value)) {
        callback(new Error('请输入有效的邮箱'))
      }
    }
    callback()
  }
}
const rules = {
  username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  phone: [{ validator: validatePass3, trigger: 'blur', required: true }],
  email: [{ validator: validatePass4, trigger: 'blur', required: true }]
}
const getUserInfo = () => {
  axios.get('/api/login/getUserByOpenid/' + openId.value + '/' + sceneStr.value).then((res) => {
    form.uid = res.data.obj.uid
    if (res.data.msg === 'ok') {
      ElMessage({
        showClose: true,
        message: '登陆成功！',
        type: 'success'
      })
      sessionStorage.setItem('uid', JSON.stringify(res.data.obj.uid))
      sessionStorage.setItem('username', JSON.stringify(res.data.obj.username))
      sessionStorage.setItem('password', JSON.stringify(res.data.obj.password))
      sessionStorage.setItem('gender', JSON.stringify(res.data.obj.gender))
      sessionStorage.setItem('headSrc', JSON.stringify(res.data.obj.headsrc))
      sessionStorage.setItem('phone', JSON.stringify(res.data.obj.phone))
      sessionStorage.setItem('email', JSON.stringify(res.data.obj.email))
      sessionStorage.setItem('addTime', JSON.stringify(res.data.obj.addTime))
      sessionStorage.setItem('vid', JSON.stringify(res.data.obj.vid))
      axios.get('api/vip/isVip/' + res.data.obj.uid).then((res1) => {
        sessionStorage.setItem('isVip', JSON.stringify(res1.data))
      })
      router.push('/DefaultMobile')
    } else {
      ElMessage({ message: '新用户,请先完善您的基本信息！' })
      filled.value = true
    }
  })
}
const getOpenId = () => {
  axios.get('/api/login/getOpenId/' + sceneStr.value).then((res) => {
    if (res.data.code === 200) {
      window.clearInterval(t.value)
      openId.value = res.data.data.openId
      getUserInfo()
    }
  })
}
const getQrCode = () => {
  axios.get('/api/login/getQrCode').then((res) => {
    if (res.data.code === 200) {
      sceneStr.value = res.data.data.sceneStr
      pic.value = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + res.data.data.ticket
      t.value = window.setInterval(getOpenId, 3000)
    }
  })
}
const submitEvent = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      form.password = SM3(form.password)
      axios.post('/api/user/updateUser', form).then((res) => {
        if (res.data !== null) {
          console.log(res.data)
          ElMessage({
            type: 'success',
            message: '更新成功'
          })
          sessionStorage.setItem('uid', JSON.stringify(res.data.uid))
          sessionStorage.setItem('username', JSON.stringify(res.data.username))
          sessionStorage.setItem('password', JSON.stringify(res.data.password))
          sessionStorage.setItem('gender', JSON.stringify(res.data.gender))
          sessionStorage.setItem('headSrc', JSON.stringify(res.data.headsrc))
          sessionStorage.setItem('phone', JSON.stringify(res.data.phone))
          sessionStorage.setItem('email', JSON.stringify(res.data.email))
          router.push('/DefaultMobile')
        }
      })
    }
  })
}
onMounted(() => {
  getQrCode()
})
</script>
